<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            var oDiv = document.getElementById("div1")
            var btn1 = document.getElementById("btn1")
            var btn2 = document.getElementById("btn2")
            var fxx = document.getElementById("fxx")
            
            btn1.onclick = function(){
                var op = document.createElement("p")
                var oText = document.createTextNode("<h1>hello world</h1>")
                oDiv.appendChild(oText)
                oDiv.appendChild(op)
            }

            btn2.onclick = function(){
                var op = document.createElement("p")
                var oText = document.createTextNode("<h1>hello world</h1>")
                document.body.insertBefore(op,oDiv)//注意body
            }

            btn3.onclick = function(){
                var op = document.createElement("p")
                var oText = document.createTextNode("<h1>hello world</h1>")
                document.body.replaceChild(oText,oDiv)//注意body
            }

            btn4.onclick = function(){
                var op = document.createElement("p")
                var oText = document.createTextNode("<h1>hello world</h1>")
                var newNode = oDiv.cloneNode()
                document.body.appendChild(newNode)
            }
            btn5.onclick = function(){
                var op = document.createElement("p")
                var oText = document.createTextNode("<h1>hello world</h1>")
                var newNode = oDiv.cloneNode(true)
                document.body.appendChild(newNode)
            }

            btn6.onclick = function(){
                var op = document.createElement("p")
                var oText = document.createTextNode("<h1>hello world</h1>")
                div1.removeChild(op)
            }
        }
    </script>
</head>
<body id = "fxx">
    <div id = "div1">
        <em>
            嘿嘿
        </em>
        div文本
        <strong>
            哈哈
        </strong>
        <p></p>
    </div>
    <button id = "btn1">节点操作1</button>
    <button id = "btn2">节点操作2</button>
    <button id = "btn3">节点操作3</button>
    <button id = "btn4">节点操作4</button>
    <button id = "btn5">节点操作5</button>
    <button id = "btn6">节点操作6</button>
    
</body>
</html>